<template>
  <div>
    <Table :columns="columns" :data="row.children" border>
      <template slot="icon" slot-scope="{ row }">
        <Icon :type="row.icon" style="font-size: 20px" />
      </template>
      <template slot="action" slot-scope="{ row }">
        <Button type="primary" size="small" @click="modifyBtnClick(row)">
          修改
        </Button>
        <Button type="error" size="small" @click="removeBtnClick(row)">
          删除
        </Button>
      </template>
    </Table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import ApiModel from '@/models/api'

@Component({
  name: 'ComAdminAuthApiSubCell'
})
export default class ComAdminAuthApiSubCell extends Vue {
  @Prop() row!: ApiModel

  columns = [
    {
      title: '标题',
      key: 'name',
      width: 200
    },
    {
      title: '索引',
      key: 'index',
      width: 70
    },
    {
      title: 'URL',
      key: 'path',
      width: 260
    },
    {
      title: '类型',
      key: 'type',
      width: 100
    },
    {
      title: '描述',
      key: 'describe'
    },
    {
      title: '操作',
      slot: 'action',
      width: 170,
      align: 'center'
    }
  ]
}
</script>

<style scoped></style>
